<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:59:30
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\other\uiSteps\uiSteps.vue
 * CIMC-V2
-->
<template>
  <el-steps
    :ref="info._id"
    v-ui-ref="vSetRef"
    :active="active"
    :align-center="alignCenter"
    :direction="direction"
    finish-status="success"
    :simple="simple"
  >
    <el-step v-for="(item, index) in info.extension.stepOptions.value" :key="index" :description="item.description" :title="item.label" />
  </el-steps>
  <Widget v-for="(item, index) in info.list" v-show="index === active" :key="item._id" :list="item.list" />
  <!-- 编辑模式可用 用于切换步骤以配置容器内容 -->
  <el-button v-if="!hasPreview" style="margin-top: 12px" @click="$nextStep">Next step</el-button>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiSteps',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin],
    data() {
      return {
        active: 0,
      }
    },
    computed: {
      direction() {
        return this.info.extension.verticalMode.value ? 'vertical' : 'horizontal'
      },
      simple() {
        return this.info.extension.simpleMode.value
      },
      alignCenter() {
        return this.info.extension.textAlign.value
      },
    },
    mounted() {},
    methods: {
      // 下一步
      $nextStep() {
        if (this.active++ > this.info.list.length) this.active = 0
      },
    },
  })
</script>
